<template>
    <div class="pt-20px">
        <div class="flex items-center">
            <p class="text-14px font-bold">搜索引擎</p>
            <div class="w-200px ml-12px">
                <el-select v-model="searchEngine" placeholder="请选择搜索引擎" @change="handleSelect">
                    <el-option v-for="(item,index) in searchEngines" :key="index" :label="item" :value="item"></el-option>
                </el-select>
            </div>
        </div>
        <div class="pt-20px table-container">
            <el-table :data="props.tableData" :default-sort="{ prop: 'Rank', order: 'descending' }" :row-key="row => row.ID" :reserve-selection="true" :fit="true" class="w-full">
                <el-table-column prop="KeyWord" label="关键词" align="center"></el-table-column>
                <el-table-column prop="FromSite" label="搜索引擎" align="center"></el-table-column>
                <el-table-column prop="Ranking" label="排名情况" sortable align="center"></el-table-column>
                <el-table-column prop="City" label="检测城市" align="center"></el-table-column>
                <el-table-column prop="IP" label="检测IP" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button v-if="scope.row.Source != '360移动端'" :icon="View" type="primary" text class="!ml-0" @click="handleView(scope.row.Site)">查看排名地址</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex flex-center pt-10px pb-10px">
                <Pagination v-if="tableData.length > 0" v-model:total="page.total" v-model:page="queryParams.curPage" v-model:limit="queryParams.pageSizes" @pagination="handleQuery" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { View } from '@element-plus/icons-vue'

const emit = defineEmits(['update:data'])

const props = defineProps({
    tableData: {
        type: Array,
        default: () => []
    },
    searchEngines:{
        type: Array as () => string[],
        default: () => <string[]>[]
    },
    page:{
        type: Object,
        default: () => {}
    }
})

const searchEngine = ref('')

const queryParams = reactive({
    curPage: props.page.curPage,
    pageSizes: props.page.pageSizes,
    type:props.page.type,
    source:searchEngine.value,
    limit:props.page.limit,
    order:''
})

async function handleView(url:string){
    window.open(url, '_blank');
}

function handleQuery(val: any) {
    queryParams.limit = val.limit
    emit('update:data', queryParams)
}

function handleSelect(val:string){
    console.log(props.page.type)
    queryParams.curPage = 1
    queryParams.source = val
    queryParams.type = props.page.type
    emit('update:data', queryParams)
}

function resetSearchEngine() {
    searchEngine.value = ''
}

defineExpose({ resetSearchEngine })
</script>

<style scoped>

</style>